<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <!--引用本地static目录下的bootstrap.min.css文件-->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/pagination.js' %}"></script>
</head>
  {% verbatim %} <!-- 添加此行 -->
<body>

<div id="app" class="container-fluid">
  <!-- 搜索栏 -->
  <div class="border rounded p-3 mb-3">
    <form class="row g-3 align-items-center">
      <div class="col-auto">
        <label for="username" class="col-form-label fw-bold">用户名</label>
      </div>
      <div class="col-auto">
        <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="search.username">
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-primary" @click="onSearch">搜索</button>
      </div>
    </form>
  </div>
  <!-- 操作栏 -->
  <div class="border rounded p-2 mb-3 d-flex align-items-center gap-2">
    <button class="btn btn-primary btn-sm">+ 新增</button>
    <button class="btn btn-secondary btn-sm" disabled>修改</button>
    <button class="btn btn-danger btn-sm" disabled>删除</button>
    <button class="btn btn-outline-secondary btn-sm" disabled>全导入</button>
    <button class="btn btn-warning btn-sm">导出</button>
  </div>
  <!-- 表格 -->
  <div class="rounded p-2">
    <table class="table align-middle mb-0">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" v-model="selectAll" @change="toggleAll"></th>
          <th scope="col">用户编号</th>
          <th scope="col">用户名</th>
          <th scope="col">用户昵称</th>
          <th scope="col">部门</th>
          <th scope="col">关联角色</th>
          <th scope="col">手机号</th>
          <th scope="col">状态</th>
          <th scope="col">创建时间</th>
          <th scope="col">操作栏</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td><input type="checkbox" v-model="user.selected"></td>
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.nickname }}</td>
          <td>{{ user.department }}</td>
          <td>{{ user.role }}</td>
          <td>{{ user.phone }}</td>
          <td>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" v-model="user.active">
            </div>
          </td>
          <td>{{ user.created_at }}</td>
          <td><a href="#" class="text-primary" @click.prevent="openEdit(user)">修改</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 编辑用户弹窗 -->
  <div class="modal fade" :class="{show: showModal}" tabindex="-1" :style="showModal ? 'display:block;background:rgba(0,0,0,0.2);' : ''">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改用户</h5>
          <button type="button" class="btn-close" @click="closeModal"></button>
        </div>
        <div class="modal-body">
          <form class="container-fluid">
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">用户昵称</label>
              <div class="col-3">
                <input type="text" class="form-control modal-input" v-model="editUser.nickname">
              </div>
              <label class="col-3 col-form-label text-end">归属部门</label>
              <div class="col-3">
                <input type="text" class="form-control modal-input" v-model="editUser.department">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">手机号码</label>
              <div class="col-3">
                <input type="text" class="form-control modal-input" v-model="editUser.phone">
              </div>
              <label class="col-3 col-form-label text-end">邮箱</label>
              <div class="col-3">
                <input type="email" class="form-control modal-input" v-model="editUser.email">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">用户名</label>
              <div class="col-3">
                <input type="text" class="form-control modal-input" v-model="editUser.username">
              </div>
              <label class="col-3 col-form-label text-end">用户密码</label>
              <div class="col-3">
                <input type="password" class="form-control modal-input" v-model="editUser.password">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">用户性别</label>
              <div class="col-3">
                <select class="form-select modal-input" v-model="editUser.gender">
                  <option value="未知">未知</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <label class="col-3 col-form-label text-end">状态</label>
              <div class="col-3 d-flex align-items-center">
                <div class="form-check me-3">
                  <input class="form-check-input" type="radio" value="正常" v-model="editUser.status" id="status-normal">
                  <label class="form-check-label" for="status-normal">正常</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" value="停用" v-model="editUser.status" id="status-stop">
                  <label class="form-check-label" for="status-stop">停用</label>
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">岗位</label>
              <div class="col-3">
                <select class="form-select modal-input-50" v-model="editUser.post">
                  <option value="普通员工">普通员工</option>
                  <option value="管理员">管理员</option>
                </select>
              </div>
              <label class="col-3 col-form-label text-end">角色</label>
              <div class="col-3">
                <select class="form-select modal-input" v-model="editUser.role">
                  <option value="普通角色">普通角色</option>
                  <option value="超级管理员">超级管理员</option>
                </select>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-2 col-form-label text-end">备注</label>
              <div class="col-9">
                <textarea class="form-control modal-input-50" rows="2" v-model="editUser.remark" placeholder="请输入内容"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">确定</button>
          <button type="button" class="btn btn-light" @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
const { createApp, ref, reactive } = Vue;
createApp({
  setup() {
    const search = ref({ username: '' });
    const selectAll = ref(false);
    const users = ref([
      {
        id: 1,
        username: 'admin',
        nickname: '管理员',
        department: 'XX创新科技',
        role: '超级管理员',
        phone: '15555555555',
        email: 'admin@163.com',
        gender: '未知',
        status: '停用',
        post: '普通员工',
        password: '',
        remark: '',
        active: true,
        created_at: '2021-02-27 06:20:09',
        selected: false
      },
      {
        id: 2,
        username: 'dvadmin',
        nickname: '普通用户',
        department: 'XX创新科技',
        role: '普通角色',
        phone: '15555555556',
        email: 'dvadmin@163.com',
        gender: '未知',
        status: '停用',
        post: '普通员工',
        password: '',
        remark: '',
        active: false,
        created_at: '2021-03-03 15:38:27',
        selected: false
      }
    ]);
    const showModal = ref(false);
    const editUser = reactive({});
    const onSearch = () => {
      // 模拟搜索
    };
    const toggleAll = () => {
      users.value.forEach(u => u.selected = selectAll.value);
    };
    const openEdit = (user) => {
      Object.assign(editUser, user);
      showModal.value = true;
      setTimeout(() => {
        document.body.classList.add('modal-open');
      }, 10);
    };
    const closeModal = () => {
      showModal.value = false;
      setTimeout(() => {
        document.body.classList.remove('modal-open');
      }, 200);
    };
    return { search, users, selectAll, onSearch, toggleAll, showModal, editUser, openEdit, closeModal };
  }
}).mount('#app');
</script>

<style>
    /* 移除红色边框样式 */
    .modal {
      transition: opacity 0.2s;
    }
    .modal.show {
      opacity: 1;
      pointer-events: auto;
    }
    .modal:not(.show) {
      opacity: 0;
      pointer-events: none;
    }
    .modal-backdrop {
      display: none;
    }
    /* 调整弹出框宽度为650px，更协调 */
    .modal-dialog {
      max-width: 650px;
      transform: scale(0.9);
    }

    /*修改弹出框中的输入框为自动*/
    .modal-input {
      width: auto;
      min-width: 0;
    }
</style>

</body>
  {% endverbatim %} <!-- 添加此行 -->
</html>
